<template>
  <div>
    <vTable
      :leftbtn="leftbtn"
      :columnsList="columnsList"
      :dataList="dataList"
      @change="tableChange"
    >
      <template #tableHeader="{ title, column }">
        <template v-if="column.dataIndex === 'copy'">
          {{ title }}
          <span
            style="
              font-size: 10px;
              font-weight: 400;
              letter-spacing: 2px;
              color: rgba(153, 153, 153, 1);
            "
          >
            {{ column.subtitle }}
          </span>
        </template>
      </template>
      <template #tableBody="{ column, text }">
        <template v-if="column.dataIndex === 'copy'">
          <div class="tablecopy">
            {{ text }}<vSvgIcon name="copy" width="16px" height="16px" />
          </div>
        </template>
        <template v-if="column.dataIndex === 'operation'">
          <vButton type="primary" link @click="editorClick">编辑</vButton>
          <vButton type="danger" link @click="deleteClick">删除</vButton>
        </template>
      </template>
    </vTable>
  </div>
</template>

<script setup>
import vTable from "@/components/table/Index.vue";
import vButton from "@/components/button/Index.vue";
import vSvgIcon from "@/components/svgIcon/Index.vue";
import { ref } from "vue";
const leftbtn = ref([
  {
    type: "primary",
    title: "创建广告",
    click: () => {
      console.log("创建广告");
    },
  },
  {
    type: "success",
    title: "发布",
    click: () => {
      console.log("发布");
    },
  },
  {
    type: "default",
    title: "创建广告2",
    click: () => {
      console.log("创建广告2");
    },
  },
]);
const columnsList = ref([
  { title: "姓名", dataIndex: "name", screen: true },
  { title: "年龄", dataIndex: "age", screen: true },
  {
    title: "地址",
    dataIndex: "address",
    children: [
      {
        title: "街",
        dataIndex: "street",
      },
      {
        title: "块",
        dataIndex: "block",
        children: [
          {
            title: "建筑",
            dataIndex: "building",
            screen: true,
          },
          {
            title: "门",
            dataIndex: "number",
          },
        ],
      },
    ],
  },

  {
    title: "复制",
    dataIndex: "copy",
    subtitle: "（显示后六位）",
    screen: true,
  },
  {
    title: "操作",
    dataIndex: "operation",
    fixed: "right",
    screen: true,
    width: 250,
  },
]);
const dataList = ref([
  {
    key: "1",
    name: "John Brown",
    age: 32,
    copy: 4432,
    address: "New York No. 1 Lake Park",
    street: "Lake Park",
    building: "C",
    number: 2035,
  },
  {
    key: "2",
    name: "Jim Green",
    age: 42,
    copy: 4442,
    address: "London No. 1 Lake Park",
    street: "Lake Park",
    building: "C",
    number: 2035,
  },
  {
    key: "3",
    name: "Joe Black",
    age: 32,
    copy: 4432,
    address: "Sidney No. 1 Lake Park",
    street: "Lake Park",
    building: "C",
    number: 2035,
  },
  {
    key: "4",
    name: "Ben Kang",
    age: 15,
    copy: 1555,
    address: "Sidney No. 1 Lake Park",
    street: "Lake Park",
    building: "C",
    number: 2035,
  },
]);
const editorClick = () => {
  console.log("编辑");
};
const deleteClick = () => {
  console.log("删除");
};
const tableChange = (pagination) => {
  console.log("pagination", pagination);
};
</script>

<style lang="" scoped></style>
